<template>
  <div class="wrap">
    <div v-show="haveData">
      <div v-loading="load" id="mountNode" style="width: 1100px; height: 400px;"></div>
      <div v-loading="load" id="mountNode2" style="width: 1100px; height: 400px;"></div>
    </div>
    <div v-show="!haveData" class="noData">
      {{$t('message.no-data')}}
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
export default {
  name: 'snapShootLine',
  data () {
    return {
      chart: null,
      load: true,
      haveData: false
    }
  },
  // mounted () {
  //   this.drawChart()
  // },
  computed: {
    ...mapState(['snapShootLine'])
    // data: [this.$t('message.available'), this.$t('message.frozen'), this.$t('message.total')]
  },
  watch: {
    snapShootLine (newval, old) {
      if (newval.lineY.length > 0) {
        console.log(newval)
        console.log('有数据')
        this.drawChart()
        this.drawChart2()
        this.load = false
        this.haveData = true
      } else {
        console.log('没数据')
        this.load = false
        this.haveData = false
      }
    }
  },
  methods: {
    drawChart: function () {
      // console.log(this.snapShootLine)
      let myChart = echarts.init(document.getElementById('mountNode'))
      let option = {
        title: {
          text: this.snapShootLine.name1
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.$t('message.available'), this.$t('message.frozen'), this.$t('message.total')]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.snapShootLine.lineY
        },
        yAxis: {
          type: 'value'
        },
        series: this.snapShootLine.snapShootLine1
      }
      myChart.setOption(option)
    },
    drawChart2: function () {
      // console.log(this.snapShootLine.snapShootLine2)
      let myChart = echarts.init(document.getElementById('mountNode2'))
      let option = {
        title: {
          text: this.snapShootLine.name2
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.$t('message.available'), this.$t('message.frozen'), this.$t('message.total')]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.snapShootLine.lineY
        },
        yAxis: {
          type: 'value'
        },
        series: this.snapShootLine.snapShootLine2
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
  .noData {
    text-align: center;
    font-size: 30px;
    color: #8c939d;
  }
</style>
